<template>
<div class="tiptools">
  <div class="tips">
    <slot name="tips_left"></slot>
    <div class="tips_love" @click="loveIt()">
      <p class="iconfont save-icon" v-show="!pic_info.show">&#xe6f2;</p>
      <p class="iconfont saved-icon" v-show="pic_info.show">&#xe627;</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'TipTools',
  props: ['picInfo'],
  data () {
    return {
      pic_info : this.picInfo
    }
  },
  mounted () {
    this.initCollection()
  },
  methods : {
    initCollection () {
      let list = [];
      if(localStorage.love) {
        for(let i of JSON.parse(localStorage.love)) {
          list.push(i.id);
        }
        if(list.includes(this.pic_info.id)) {
          this.pic_info = Object.assign({}, this.pic_info, { show: true })
        }else {
          this.pic_info = Object.assign({}, this.pic_info, { show: false })
        }
      }
    },
    loveIt: function(){
      if (!this.pic_info.show){
        //未点赞
        let data;
        if(localStorage.love) {
          data = JSON.parse(localStorage.love);
        }else {
          data = []
        }
        let obj = {
          id : this.pic_info.id,
          listimgurl : this.pic_info.cover_img,
          show : true
        }
        data.push(obj);
        localStorage.love = JSON.stringify(data);
      }else{
        //已点赞
        let data = JSON.parse(localStorage.love);
        for(let i=0; i<data.length; i++) {
          if(data[i].id === this.pic_info.id) {
            data.splice(i, 1);
            break;
          }
        }
        localStorage.love = JSON.stringify(data);
      }
      this.$set(this.pic_info, 'show', !this.pic_info.show);
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tips{
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  color: #fff;
  padding-bottom: 5px;
  background-color: #173141;
  margin-bottom: 15px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
}

.tips .tips_left{
  float: left;
  width: 85%;
  padding:0 10px 0 10px;
  text-align: left;
}

.tips_title {
    line-height: 32px;
}

.tips_desc {
    line-height: 20px;
}

.tips .tips_love{
  float: right;
  padding:5px 5px 0 0;
}

.tips .tips_love .iconfont {
    font-size: 20px;
}

.tips .tips_down{
  float: right;
  padding-right: 10px;
}

.tips svg{
  position: relative;
  top: 5px;
  z-index:1;
}

.tips .tips_right:nth-child(2){
  padding-right: 10px
}
</style>
